import React, { useRef, useState } from 'react'
import PropTypes from 'prop-types';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import { Box, Grid, Typography } from '@material-ui/core';
import { VideoPlay } from 'components/videoPlay';
import { useSelector } from 'react-redux';
import ReactPlayer from "react-player";
import { Image } from 'components/atoms';

const useStyles = makeStyles(theme => ({
    root: {
        width: "100%",
        height: "calc(100vh - 64px)",
        overflow: "hidden",
        [theme.breakpoints.up('sm')]: {
            height: "calc(90vh - 64px)",
        },
        [theme.breakpoints.up('md')]: {
            height: "calc(80vh - 64px)",
        },
    },
    typography: {
        textAlign: "center",
        fontFamily: "HurmeGeometricSans3-Black",
        fontSize: "20px",
        fontStyle: "normal",
        fontWeight: 700,
        lineHeight: "normal",
        textTransform: "uppercase",
        color: "#fff",
        [theme.breakpoints.up('md')]: {
            fontSize: "38px",
        },
    },
    typography1: {
        textAlign: "left",
        fontFamily: "HurmeGeometricSans3-Black",
        fontSize: "14px",
        fontStyle: "normal",
        fontWeight: "normal",
        lineHeight: "32px",
        textTransform: "uppercase",
        color: "#e1e1e1",
        [theme.breakpoints.up('md')]: {
            fontSize: "14px",
        },
        [theme.breakpoints.up('lg')]: {
            fontSize: "16px",
        },
        marginTop: "20px"
    },

    image: {
        objectFit: 'cover',
        borderRadius: theme.spacing(0, 0, 20, 0),
    },
    grid: {
        background: "#333",
        height: "100%",
        padding: "20px",
        [theme.breakpoints.up('md')]: {
            padding: "50px 40px",
        },
    },
    gridItem: {
        background: "#333",
        display:"flex",
        justifyContent: "center",
        alignItems: "center",
        paddingLeft: "20px",
    },
    btn: {
        color: "#fff",
        display:"flex",
        justifyContent:"center",
        alignItems:"center",
        fontSize:"16px",
        marginBottom: "20px",
        [theme.breakpoints.up('md')]: {
            marginBottom: "50px",
        },
    },
    btnItem: {
        color: "#F21F23",
        padding:"10px",
        marginLeft: "20px",
        borderRadius:"50%",
        border:"2px solid #F21F23",
        cursor: "pointer",
        width:"50px",
        height:"50px",
        textAlign:"center",
        lineHeight:"30px",
    },
}));

const Banner = () => {

    const classes = useStyles();
    const theme = useTheme()
    // console.log(theme)

    const BannerData = useSelector((state) => state.cover.discovers.home);

    return (
        <div className={classes.root}>
            <Grid container className={classes.grid}>
                <Grid item xs={12} md={7} container justifyContent='space-between' direction='column' alignItems='center'>
                    <div>
                        <Typography className={classes.typography}>
                            WEST COAST HIP-HOP AWARDS
                        </Typography>
                        <Typography className={classes.typography1}>
                            15 YEARS YEARS STRONG, THE WEST COAST HIP-HOP AWARDS WILL RETURN AGAIN TO THE LA AREA FOR 2024. HOSTED BY YUKMOUTH, ROYALY RULES AND A SPECIAL GUEST. DON’T MISS THE LIVE PERFORMANCES, NETWORKING AND AWARDS.  (Allow Lnk)
                        </Typography>
                    </div>

                    <div className={classes.btn}>
                        Share to
                        <div className={classes.btnItem}>Fb</div>
                        <div className={classes.btnItem}>Tw</div>
                        <div className={classes.btnItem}>lg</div>
                    </div>
                </Grid>
                <Grid item xs={12} md={5} className={classes.gridItem}>
                    <div className={classes.adsVideo}>
                        <ReactPlayer
                            playing={true}
                            url={BannerData?.index_discover_video}
                            playsinline
                            controls
                            loop
                            light={
                                <Image
                                    src={BannerData?.index_discover_image}
                                    alt={BannerData?.index_discover_image}
                                    lazyProps={{ width: '100%', height: '100%' }}
                                />}
                            width={"100%"}
                        // height={"100%"}
                        />
                    </div>
                </Grid>
            </Grid>
        </div>
    )
}


Banner.propTypes = {
    /**
     * External classes
     */
    className: PropTypes.string,
};


export default Banner
